<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑</title>
    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>
    <!--<link rel="stylesheet" type="text/css" th:href="@{datepicker/jquery.datetimepicker.css}"/>-->
</head>
<body>
<style>
    /** 富文本编辑器**/
    .editButtons span {
        display: inline-block;
        white-space: nowrap;
    }

    [data-edit] {
        float: left;
        border: 0;
        font: 12px/1 monospace;
        background: #ddd;
        padding: 4px 8px;
    }

    [contenteditable] {
        padding: 4px 16px;
        background: #eee;
    }
</style>
<!-- 富文本编辑器-->
<div class="editButtons">

        <span title="STYLES">
            <!-- 加粗 -->
            <button data-edit="bold"><b>B</b></button>
            <!-- 斜体 -->
            <button data-edit="italic"><i>I</i></button>
            <!-- 下划线 -->
            <button data-edit="underline"><u>U</u></button>
            <!-- 中划线 -->
            <button data-edit="strikeThrough"><s>S</s></button>
        </span>

    <span title="TEXT FORMAT">
            <!-- 字体标签设置 -->
            <button data-edit="formatBlock:p">P</button>
            <button data-edit="formatBlock:H1">H1</button>
            <button data-edit="formatBlock:H2">H2</button>
            <button data-edit="formatBlock:H3">H3</button>
        </span>

    <span title="FONT SIZE">
            <!-- 字体大小设置 -->
            <button data-edit="fontSize:1">s</button>
            <button data-edit="fontSize:3">M</button>
            <button data-edit="fontSize:5">L</button>
        </span>

    <span title="LISTS">
            <!-- 列表格式设置 -->
            <button data-edit="insertUnorderedList">UL</button>
            <button data-edit="insertOrderedList">OL</button>
        </span>

    <span title="ALIGNMENT">
            <!-- 文本对齐设置 -->
            <button data-edit="justifyLeft">&#8676;</button>
            <button data-edit="justifyCenter">&#8596;</button>
            <button data-edit="justifyRight">&#8677;</button>
        </span>

    <span title="CLEAR FORMATTING">
            <!-- 对所选内容去除所有格式 -->
            <button data-edit="removeFormat">&times;</button>
        </span>

    <span title="COPY">
            <!-- 复制选中文本 -->
            <button data-edit="copy">C</button>
        </span>
</div>
<div contenteditable id="textbox" onchange="onChangeText()" style="height: 400px">

</div>
<div align="center">
    <input name="nIdName" th:hidden="${nId}" id="nId" value="-1"/>
    <button class="layui-btn layui-btn-primary" id="save-btn" i18n="save-btn" onclick="saveNote()">保存</button>
</div>

</body>
<script type="text/javascript">
    var text = '[[${text}]]';
    var nId = '[[${nId}]]';
    if (text != null && text != undefined && text != 'undefined') {
        text = text.replaceAll('&lt;', '<').replaceAll('&gt;', '>')
        document.getElementById("textbox").innerHTML = text
    }
    if (nId != null && nId != undefined) {
        $('#nId').val(nId)
    }

    // $.parser.parse($("#textbox").parent()); >> easyUi

    function onChangeText() {
        console.log($("#textbox").html())
    }

    /** 保存 **/
    function saveNote() {
        var nId = $("[id='nId']").val()
        // 笔记内容
        // var textbox = document.getElementById("textbox").innerHTML
        var textbox = $("#textbox").html();
        var query = {
            'nid': nId,
            'text': textbox
        };
        $.ajax({
            url: '/n/v1/saveOrUpdate',
            type: "POST",
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',//发送格式（JSON串）
            data: JSON.stringify(query),//发送参数（JSON串）
            success: function (results) {
                if (results.data) {
                    layer.msg("保存成功", {icon: 1, time: 2000}, function () {
                        // 关闭当前页面
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        getHistoryByDay(today);
                        //重新加载父页面
                        parent.location.reload();
                    });
                } else {
                    layer.msg("保存失败", {icon: 1, time: 2000}, function () {
                        // 关闭当前页面
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        getHistoryByDay(today);
                        //重新加载父页面
                        parent.location.reload();
                    });
                }
            }
        });
    }

    /** 富文本编辑器
     * https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand#%E5%91%BD%E4%BB%A4
     **/
    document.querySelectorAll("[data-edit]").forEach(btn =>
        btn.addEventListener("click", function (ev) {
            ev.preventDefault();
            const cmd_val = this.getAttribute("data-edit").split(":");
            console.log(cmd_val)
            if (cmd_val.length == 1) {
                document.execCommand(cmd_val[0]);
            } else {
                document.execCommand(cmd_val[0], false, cmd_val[1]);
            }
        })
    );
</script>
<script th:src="@{base/datepicker/jquery.datetimepicker.js(v=${version})}"></script>
<script th:src="@{note/note.js(v=${version})}"></script>
</html>